<template>
  <div class="addfoot_main">
    <a-card :loading="loading" title="添加硒都美食">
      <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        style="width: 100%; height: 3em"
        @click="footMeaageList"
      >
        <a-menu-item v-for="item in footAddList" :key="item.id">
          {{ item.addressName }}
        </a-menu-item>
      </a-menu>
      <div class="card_message">
        <a-card
          hoverable
          style="width: 30em; display: inline-block; margin: 0 10px"
          v-for="(item, index) in message_card"
          :key="index"
        >
          <template #cover>
            <img alt="example" :src="item.imageUrl" />
          </template>
          <a-card-meta :title="item.name">
            <template #description>
              {{ item.description }}
            </template>
          </a-card-meta>
        </a-card>
        <a-card hoverable class="card_add" @click="add_foot">
          <PlusCircleOutlined
            style="
              width: 100%;
              height: 100%;

              font-size: 4em;
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          />
        </a-card>
      </div>
    </a-card>
    <a-modal
      v-model:visible="dialogStatu"
      title="添加美食"
      @ok="handleOk"
      ok-text="添加"
      cancel-text="取消"
      width="50em"
      destroyOnClose
      :confirmLoading="addLoading"
    >
      <div style="width: 100%">
        <a-form
          :model="formState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item label="美食名称">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="美食描述">
            <a-textarea
              autosize
              v-model:value="formState.description"
            />
          </a-form-item>
          <a-form-item label="美食图片">
            <a-upload
              list-type="picture"
              v-model:file-list="picList"
              :beforeUpload="() => false"
              :disabled="picList.length >= 1"
            >
              <a-button @click="handleChange">
                <upload-outlined></upload-outlined>
                选择图片
              </a-button>
              <a-button
                @click="removePic"
                style="margin-left: 10px"
                v-show="picList.length >= 1"
              >
                删除图片
              </a-button>
            </a-upload>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, UnwrapRef } from "vue";
import { footAddress, footList, addFoot } from "@/utils/fetch/api";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
interface FormState {
  name: string;
  description: string;
  image: any;
  addressId: any;
}
export default defineComponent({
  components: {
    PlusCircleOutlined,
  },
  setup() {
    const loading = ref<Boolean>(false);

    const current = ref<number[]>([1]);

    const footAddList = ref<any>([]);
    const footMessage = ref<any>([]);

    const refresh = async () => {
      try {
        const data = await footAddress();
        footAddList.value = data.data;

        const params = {
          pageNum: 1,
        };
        const datas = await footList(params);
        footMessage.value = datas.data.data;
      } catch (error) {
        console.error(error);
      }
      footMeaageList({ key: current.value[0] });
    };

    const message_card = ref<any>([]);

    const footMeaageList = async (item: any) => {
      const keyNum = item.key;
      let addName: any;
      message_card.value = [];
      footAddList.value.forEach((items: any) => {
        if (items.id == keyNum) {
          addName = items.addressName;
          return;
        }
      });
      if (addName == undefined) {
        return;
      } else {
        footMessage.value.forEach((items: any) => {
          if (items.foodAddress == addName) {
            message_card.value.push(items);
          }
        });
      }
    };

    const addLoading = ref<boolean>(false);
    const dialogStatu = ref<boolean>(false);
    const add_foot = () => {
      dialogStatu.value = true;
    };
    const handleOk = async () => {
      if (formState.name.length <= 0) {
        message.warning("请填写美食名称！");
        return;
      }
      if (formState.description.length <= 0) {
        message.warning("请填加美食描述！");
        return;
      }
      if (picList.value.length <= 0) {
        message.warning("请选择美食展示图片！");
        return;
      }

      addLoading.value = true;
      const formdata: any = new FormData();
      formdata.append("name", formState.name);
      formdata.append("description", formState.description);
      formdata.append("image", picList.value[0].originFileObj);
      formdata.append("addressId", current.value[0]);

      try {
        const data = await addFoot(formdata);
        message.success("添加完成！");
        refresh();
        setTimeout(() => {
          dialogStatu.value = false;
        }, 1000);
      } catch (err) {
        console.error(err);
      } finally {
        addLoading.value = false;
      }
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });

    const picList = ref<any>([]);
    const formState: UnwrapRef<FormState> = reactive({
      name: "",
      description: "",
      image: picList.value[0],
      addressId: current.value[0],
    });

    const handleChange = () => {
      if (picList.value.length >= 1) {
        message.warning("只能选择一张图片！");
      }
    };
    const removePic = () => {
      picList.value = [];
    };
    return {
      loading,
      current,
      footAddList,
      footMeaageList,
      message_card,
      add_foot,
      dialogStatu,
      handleOk,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      picList,
      handleChange,
      removePic,
      addLoading,
    };
  },
});
</script>

<style lang="less" scoped>
.addfoot_main {
  width: 100%;
  height: 100%;
  background: white;
  /deep/.ant-menu-title-content {
    font-size: 1.5em;
  }
  .card_message {
    margin-top: 20px;
    min-height: 30em;
    .ant-card {
      float: left;
    }
    .ant-card::after {
      content: "";
      clear: both;
    }
    .card_add {
      width: 30em;
      display: inline-block;
      margin: 0 10px;
      height: 25em;
      color: #eee;
      /deep/.ant-card-body {
        width: 100%;
        height: 100%;
      }
    }
    .card_add:hover {
      color: rgb(134, 133, 133);
    }
  }
}
/deep/.ant-card {
  .ant-card-head-title {
    font-size: 3em;
  }
}
</style>
